@font-face {
    font-family: 'PTSansCaptionRegular';
    src: url('../fonts/PT-Sans-fontfacekit/PTC55F-webfont.eot');
    src: url('../fonts/PT-Sans-fontfacekit/PTC55F-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/PT-Sans-fontfacekit/PTC55F-webfont.woff') format('woff'),
         url('../fonts/PT-Sans-fontfacekit/PTC55F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
a {text-decoration: none; color: #0194BE; }
a:hover { color: #F07E13; }

h4 {
	font-size: 1.4em;
}
p {
	font-size: 1.3em;
}

body{
	height:100%;
	overflow-x:hidden;
	margin:0px;
}

#stripesLine{
	background-image: url("../images/stripes.png");
	background-repeat: repeat-x;
	height:290px;
}

#orangeStripe{
	//position:absolute;
	//top:50%;
	margin: 0px, 0px, 0px, 0px;
	background-color:#f07e13;
	height:150px;
}

#giftfulLabel{
	position:absolute;
	//left:50%;
	//top:340px;
	margin: -100px 0px 0px -224px;	
	background-image: url("../images/label.png");
	width:448px;
	height:253px;
	background-repeat: no-repeat;
}

.facebookLogIn{
	position:absolute;
	top:170px;
	left:-300px;
	text-align:center;
	font-family: PTSansCaptionRegular;
	color:#481800;
	width:600px;
}

.firstContent{
	position:absolute;
	top:340px;
	left:50%;
}

#content{
	position:absolute;
	left:50%;
	//top:50%;
	margin: -350px 0px 0px -320px;	
	width:640px;
	min-height:500px;
	background-color:#FFFFFF;
	border: solid #BF7130 1px;
	font-family: PTSansCaptionRegular;
	color: #481800;
}

#labelSmall{
	background-image: url("../images/labelSmall.png");
	height:123px;
	width:224px;
	position: absolute;
	top:-61px;
	left:32.5%;
}

#friendPicker{
	position: absolute;
	top:80px;
	left:25%;
	text-align:center;
	font-size: 26px;
	line-height:200%;
}

.inputField{
	width:332px;
	height:30px;
	border: 1px solid #481800; 
	font-size:16px;
}

.questionMark{
	height:180px;
	width:82px;
	position: absolute;
	top: 270px;
	left:45%;
	cursor:pointer;
	background-image: url('../images/questionmark.png');
}

.questionMark:hover {
   background-image: url("../images/questionmark_brown.png");
}

#occassionDiv select {
	position: absolute;
	left:2px;
   background-color: transparent;
   width: 332px;
   padding: 5px;
   font-size: 16px;
   border: 1px solid #481800;
   height: 30px;
}

#left{
	position:absolute;
	left:20px;
	top:130px;
	//border: solid 1px black;
	height:350px;
	width: 200px;
}
#right{
	position:absolute;
	left:200px;
	top:130px;
	//border: solid 1px red;
	height:350px;
	width: 420px;
	overflow: scroll;
}
#upperText{
	position: absolute;
	top: 100px;
	left: 210px;
}

#titleGiftList{
	position:absolute;
	top:10px;
	left:20px;

}

.separator{
	position:absolute;
	top: 40px;
	left:20px;
	background-color:#0FC3E8;
	height:1px;
	width:130px;
}

#giftList{
	position:absolute;
	top:60px;
	left:20px;
	font-size: 14px;
}

.giftItem {
	width: 100px;
	height: 100px;
	background-color: #666666;
	position: relative;
	margin: 10px;
	float: left;
	border: 1px solid #CCCCCC;
}

.giftImage {
	width: 100px;
	height: 100px;
}

.addGift {
	position: absolute;
	top: 0;
	right: 0;
	display: none;
}

/* the overlayed element */
.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url('../images/white.png');
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;		
	
	/* some padding to layout nested elements nicely  */
	padding:35px;

	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url('../images/close.png');
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}
.apple_overlay img {
	float: left;
	margin: 20px;
	background-color: #CCCCCC;
	border: 1px solid #666666;
	width: 300px;
}

.details {
	margin-left: 350px;
}

/* slider root element */
.slider { 
	background:#3C72E6 url(../../../img/gradient/h30.png) repeat-x 0 0; 
	height:9px; 
	position:relative; 
	cursor:pointer;
	border:1px solid #333;
	width:150px;
	float:left; 
	clear:right;
	margin-top:10px;
	-moz-border-radius:5px; 
	-webkit-border-radius:5px; 
	-moz-box-shadow:inset 0 0 8px #000;
}

/* progress bar (enabled with progress: true) */
.progress {
	height:9px; 
	background-color:#C5FF00; 
	display:none;
	opacity:0.6;
}

/* drag handle */
.handle { 
	background:#fff url(../../../img/gradient/h30.png) repeat-x 0 0; 
	height:18px;
	width:18px;
	top:-7px;
	position:absolute; 
	display:block; 
	margin-top:1px;
	border:1px solid #000;
	cursor:move;
	-moz-box-shadow:0 0 6px #000;
	-webkit-box-shadow:0 0 6px #000;
	-moz-border-radius:14px;
	-webkit-border-radius:14px; 

}

/* the input field */
.range {
	border:1px inset #ddd;
	float:left;
	font-size:20px;
	margin:0 0 0 15px;
	padding:3px 0;
	text-align:center;
	width:50px;
	-moz-border-radius:5px; 
	-webkit-border-radius:5px; 		
}

